<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="formInline.gname" placeholder="商品名称"></el-input>
      </el-form-item>
      <el-form-item label="商品类型">
        <el-input v-model="formInline.gtype" placeholder="商品类型"></el-input>
      </el-form-item>
      <el-form-item label="商品品牌">
        <el-input v-model="formInline.gbrand" placeholder="商品品牌"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>


    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="gid"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="gbrand"
        label="商品品牌"
      >
      </el-table-column>
      <el-table-column
        prop="gname"
        label="商品名称"
      >
      </el-table-column>
      <el-table-column
        prop="gtype"
        label="商品类型"
      >
      </el-table-column>
      <el-table-column
        prop="shop.dname"
        label="店铺名称"
      >
      </el-table-column>
      <el-table-column
        prop="gdesc"
        label="商品描述">
      </el-table-column>
      <el-table-column
        prop="maintainer"
        label="维护人">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
      >

        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看" :visible.sync="dialogFormVisible" width="30%">
      <el-form  label-width="80px" :data="formIn">
        <el-form-item label="商品名称">
          <el-input prop="formIn.gname" disabled/>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-input prop="formIn.gtype" disabled ></el-input>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-input  prop="formIn.gbrand"  disabled></el-input>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="formIn.dname"  disabled></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="formIn.gdesc"  disabled></el-input>
        </el-form-item>
        <el-form-item label="维护人">
          <el-input v-model="formIn.maintainer" disabled ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogFormVisible = false">返回</el-button>
        </el-form-item>
      </el-form>
      <!--      <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>-->
    </el-dialog>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="page.total"
      :page-size="2"
      @current-change="pageMethod"
    >
    </el-pagination>

  </div>

</template>

<script>
export default {
  name: "GoodsList",

  data(){
    return{
      page:{
        total:0
      },


      formInline: {
        gname: '',
        gtype: '',
        gbrand:'',
      },
      formIn: {
        gname: '',
        gtype: '',
        gbrand:'',
        dname:'',
        gdesc:'',
        maintainer:'',
      },
      tableData: []
    }
  },
  mounted() {

    var vm = this

    this.axios({
      method:"GET",
      url:"/api/goods/findAll?pageNum=1&pageSize=2"
    }).then(function (res){
      if(res.data.code == 200){

        //console.log(res.data.data)

        vm.tableData = res.data.data.list
        vm.page.total = res.data.data.total

      }
    })

  },

  methods: {
    handleClick(row) {
      this.dialogFormVisible = true;
      console.log(row)
      this.formIn.gname=row.goods.gname;
      this.formIn.gtype=row.goods.gtype;
      this.formIn.gbrand=row.goods.gtype;
      this.formIn.dname=row.shop.dName;
      this.formIn.gdesc=row.goods.gdesc;
      this.formIn.maintainer=row.goods.maintainer;
    },

    onSubmit(){

      var vm = this

      this.axios({
        method:"GET",
        url:"/api/goods/findAll?gname="+vm.formInline.gname+"&gtype="+vm.formInline.gtype+"&gbrand="+vm.formInline.gbrand+"&pageNum=1&pageSize=2"
      }).then(function (res){
        if(res.data.code == 200){

          console.log(res.data.data)

          vm.tableData = res.data.data.list
          vm.page.total = res.data.data.total

        }
      })

    },

    pageMethod(pageNum){

      var vm = this

      this.axios({
        method:"GET",
        url:"/api/goods/findAll?gname="+vm.formInline.gname+"&gtype="+vm.formInline.gtype+"&gbrand="+vm.formInline.gbrand+"&pageNum="+pageNum+"&pageSize=2"
      }).then(function (res){
        if(res.data.code == 200){

          console.log(res.data.data)

          vm.tableData = res.data.data.list

          vm.page.total = res.data.data.total

        }
      })


    }
  }
}
</script>

<style scoped>

</style>
